<template>
	<view class="app-team">
		<view class="team-search">
			<u-search placeholder="请输入电话号码/备注搜索" maxlength="11" shape="square" bgColor="#f5f5f5" v-model="tel" @search="search"
			 @clear="clear" @custom="search"></u-search>
		</view>
		<view class="search-box"></view>
		<view v-if="!isSearch">
			<view  class="team-content">
				<!-- <view :class="'flex-box grade-box-'+info.vip_level" v-if="info.vip_level>0">
					<view class="box-1">
						我的等级
						<view class="grade-sign">{{info.vip_level==3?'经销商':'联盟商'}}</view>
					</view>
					<image :src="comm_img_url+'/dealer/vip-'+info.vip_level+'.png'" class="icon-grade"></image>
					<image :src="comm_img_url+'/dealer/vip-bg-'+(info.vip_level==3?3:4)+'.png'" class="icon-grade-bg"></image>
				</view> -->
				<view class="team-num">
					我的团队(<text class="num">总业绩:{{!info.group_num?0:info.group_num}}</text>)
				</view>
			</view>
			<view class="team-box">
				<team-item :i="1" :style="'height:'+heightView+'px'" ref="team" no_text="暂无团队人员"></team-item>
			</view>
		</view>
		<view class="search-box" >
			<view  v-if="isSearch">
				<team-item :i="2" :style="'height:'+heightViewSearch+'px'" ref="searchteam" :is_search="isSearch" :tel="tel" no_text="暂无相关人员"></team-item>
			</view>
		</view>
	</view>
</template>

<script>
	import listNone from "@/components/listnone/listnone.vue"
	import teamItem from "./team-item.vue"
	export default {
		components: {
			listNone,
			teamItem
		},
		data() {
			return {
				comm_img_url:'',
				tel: '',
				info: {
					vip_level:0,
					vip_name:''
				},
				isSearch: false,
				heightView: 500,
				heightViewSearch:500,
			};
		},
		onReady() {
			this.initData()
			let winHeight = 0;
			uni.getSystemInfo({
			    success:(res)=>{
					winHeight = res.windowHeight
			    }
			});
			const query = uni.createSelectorQuery().in(this);
			setTimeout(()=>{
				query.select('.search-box').boundingClientRect(data => {
				  let viewtop = data.top
				  this.heightViewSearch = parseFloat(winHeight) -parseFloat(data.top)
				}).exec();
				query.select('.team-box').boundingClientRect(data => {
				  let viewtop = data.top
				  this.heightView = parseFloat(winHeight) -parseFloat(data.top)
				}).exec();
			},1000)
			this.$nextTick(res=>{
				this.$refs.team.getData()
			})
		},
		methods: {
			initData() {
				this.$u.api.teamList({
						page: 1
					})
					.then(res => {
						if (res.status) {
							this.info = res.msg
							return
						}
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					})
					.catch(err => {
						console.log(err)
					})
			},
			search() {
				if (!this.tel) {
					uni.showToast({
						icon: 'none',
						title: "请输入电话号码/备注搜索"
					})
					return
				}
				this.isSearch = true
				this.$nextTick(res=>{
					this.$refs.searchteam.getData(this.tel)
				})
			},
			clear() {
				this.tel = ''
				this.$nextTick(res=>{
					this.$refs.team.getData()
				})
			}
		},
		watch: {
			tel(val) {
				if (!val) {
					this.isSearch = false
				}
			}
		}
	}
</script>

<style lang="less">
	// @import url('@/common/css/comm.less');

	page {
		background-color: #fff;
	}
	.app-team {
		color:#333;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		.team-search {
			margin-bottom: 20rpx;
			.search {
				background:#e5e5e5;
				border-radius: 40rpx;
				margin-right: 20rpx;
				padding: 20rpx 0;
				text-indent: 45rpx;
			}
		}
		.team-num {
			padding: 20rpx 0;
			font-size:32rpx;
			.num {
				color:#f44440;
			}
		}
	}

	.grade-box {
		font-size:26rpx;
		padding: 20rpx 40rpx 20rpx 60rpx;
		position: relative;
		height: 146rpx;
		z-index:0;

		.icon-grade {
			width: 150rpx;
			height:158rpx;
			margin-top: 20rpx;
		}

		.grade-sign {
			font-weight: bold;
			font-style:oblique;
			font-size:40rpx;
		}
		.icon-grade-bg{
			position:absolute;
			top:0;
			right:0;
			z-index:-1;
			width: 248rpx;
			height: 146rpx;
		}
	}
	.grade-box-3 {
		.grade-box;
		color:#707581;
		background-image: linear-gradient(-70deg,#b5bfc7 0%,#d2dae2 47%,#eff4fd 100%);
	}

	.grade-box-4 {
		.grade-box;
		
		color:#805536;
		background-image: linear-gradient(-74deg,#f8d2ac 2%,#f7dec3 68%,#f6e9d9 100%);
	}
	.team-grade {
		background:#eee;
		font-size:32rpx;
		color:#333;
		padding: 10rpx 20rpx;

		.icon-team {
			width: 94rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
	}

	.team-item {
		border-bottom: 1px solid #eee;
		padding: 20rpx 0;
		
		font-size:22rpx;
		color:#999;
		

		.icon-item {
			width: 88rpx;
			height: 88rpx;
			margin-right: 20rpx;
		}

		.item-name {
			font-size:30rpx;
			color:#333;
			
		}

		&:last-child {
			border: 0;
		}
	}
</style>
